<template>
	<view class="CardIndex">
		<HomePage v-if="CurrentPage == 'HomePage'" />
		<classification v-if="CurrentPage == 'classification'" />
		<note v-if="CurrentPage == 'note'" ref="note" />
		<!-- <Order v-if="CurrentPage == 'Order'" ref="order"/> -->
		<My v-if="CurrentPage == 'My'" ref="my" />

		<view class="footer">
			<view class="footerItem" @click="ChangeCurrentPage('HomePage')">
				<image :src="
            CurrentPage == 'HomePage'
              ? imgUrl + 'homepage_cur.png'
              : imgUrl + 'homepage.png'
          " class="FooterIcon" v-if="imgUrl+'homepage.png'" />
				<text :class="CurrentPage==='HomePage'?'active':''">首页</text>
			</view>
			<view class="footerItem" @click="ChangeCurrentPage('classification')">
				<image :src="
            CurrentPage == 'classification'
              ? imgUrl + 'classification_cur.png'
              : imgUrl + 'classification.png'
          " class="FooterIcon" v-if="imgUrl+'classification.png'" />
				<text :class="CurrentPage==='classification'?'active':''">分类</text>
			</view>
			<view class="footerItem" @click="ChangeCurrentPage('note')">
				<image :src="
            CurrentPage == 'note'
              ? imgUrl + 'note_cur.png'
              : imgUrl + 'note.png'
          " class="FooterIcon" v-if="imgUrl+'note.png'" />
				<text :class="CurrentPage==='note'?'active':''">消息</text>
			</view>
			<!--  <view class="footerItem" @click="ChangeCurrentPage('Order')">
                <image :src="
            CurrentPage == 'Order'
              ? imgUrl + 'order_cur.png'
              : imgUrl + 'order.png'
          " class="FooterIcon" v-if="imgUrl+'order\.png'"/>
                <text :class="CurrentPage==='Order'?'active':''">订单</text>
            </view> -->
			<view class="footerItem" @click="ChangeCurrentPage('My')">
				<image :src="
            CurrentPage == 'My'
              ? imgUrl + 'my_cur.png'
              : imgUrl + 'my.png'
          " class="FooterIcon" v-if="imgUrl+'my.png'" />
				<text :class="CurrentPage==='My'?'active':''">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	import HomePage from "@/pages/HomePage/HomePage.vue";
	import classification from "@/pages/classification/classification.vue";
	import Order from "@/pages/Order/Order.vue";
	import note from "@/pages/note/note.vue";
	import My from "@/pages/My/My.vue";
	// import gameDetails from "@/static/lib/public.js";
	export default {
		components: {
			HomePage,
			classification,
			Order,
			My,
			note,
		},
		data() {
			return {
				CurrentPage: "HomePage",

				imgUrl: this.$http.imgUrl + '/static/footer/',

				// gameDetailsData: gameDetails,

				modalName: null,

				// 判断是否是ios
				isIos: false,

				form: {
					avatarUrl: "",
					nickName: "",
					companyName: "",
					contactPhone: "",
				},


				LoginOrNot: false,

				PlaceAnOrderStatus: {},

				AddAvatarUrl: "https://lzmordershop.oss-cn-hangzhou.aliyuncs.com/static/HomePage/AddAvatar.jpg",
			};
		},
		onLoad({
			id
		}) {
			if (id) {
				this.CurrentPage = id;
			}
		},
		mounted() {

		},
		methods: {
			ChangeCurrentPage(condition) {
				if (condition === 'note') {
					uni.showToast({
						title: '暂未开放',
						icon: "none"
					})
					return
				}
				this.CurrentPage = condition;
			},
			hideModel() {
				this.modalName = null;
				this.form.avatarUrl = "";
				this.form.nickName = "";
				this.form.companyName = "";
				this.form.contactPhone = "";
			},
			shwModel() {
				if (this.IsLogin()) {
					this.modalName = "bottomModala";
				} else {
					uni.showToast({
						title: "请先登录",
					});
					uni.navigateTo({
						url: "/pages/login/login",
					});
				}
			},
			async Confim() {
				const url = "/app/book_order/book";
				const res = await this.$http.post(url, {
					...this.form,
				});
				if (res.data.code == 200) {
					uni.showToast({
						title: "申请成功",
						icon: "success",
					});
					this.getPlaceAnOrderStatus();
					this.hideModel();
					return
				}
				uni.showToast({
					title: res.data.code == 500 ? '请勿重复申请' : res.data.message,
					icon: "error",
				});
				console.log(res, "申请订货");
			},
			async getPlaceAnOrderStatus() {
				const res = await this.$http.get("/app/book_order/getBookStatus");
				// console.log(res, '订货状态');
				this.PlaceAnOrderStatus = res.data.data;
				console.log(this.PlaceAnOrderStatus);
			},
			async SelectPic(Url) {
				this.AddAvatarUrl = Url;
				this.form.avatarUrl = Url;
			},
			UploadImage() {
				uni.chooseImage({
					success: async (chooseImageRes) => {
						const url = this.api.my.UploadImage;
						console.log(chooseImageRes, "上传图片");
						uni.uploadFile({
							url: "https://j.kaletcg.com/lzmtest" + url,
							filePath: chooseImageRes.tempFilePaths[0],
							name: "file",
							success: (uploadFileRes) => {
								const res = JSON.parse(uploadFileRes.data);
								uni.setStorageSync("avatar", res.data);
								this.SelectPic(res.data);
							},
						});
					},
				});
			},
			test() {
				this.PlaceAnOrderStatus.book = false;
			},
		},
		onShow() {
			// console.log('我一直被触发')
			if (!uni.getStorageSync('cityName')) {
				// // 经度
				// uni.setStorageSync('lng', 119.296411)
				// // 纬度
				// uni.setStorageSync('lat', 26.074286)
				// // 当前地址
				// uni.setStorageSync('cityName', '福州市')
				// // 当前adCode
				// uni.setStorageSync('adCode', 350100)

				// 经度
				uni.setStorageSync('lng', 121.473667)
				// 纬度
				uni.setStorageSync('lat', 31.230525)
				// 当前地址
				uni.setStorageSync('cityName', '上海市')
				// 当前adCode
				uni.setStorageSync('adCode', 310000)
			}

			// 获取经纬度
			uni.getSetting({
				success(set) {
					if (!set.authSetting['scope.userLocation']) {
						console.log('无授权地址')
					} else {
						console.log('授权地址')
						uni.getLocation({
							type: 'gcj02',
							success: function(res) {
								// // 经度
								// uni.setStorageSync('lng', res.longitude)
								// // 纬度
								// uni.setStorageSync('lat', res.latitude)
								// 原始经度
								uni.setStorageSync('yslng', res.longitude)
								// 原始纬度
								uni.setStorageSync('yslat', res.latitude)
								// uni.$emit('gainCity', true)
							},
							fail(res) {
								console.log(res, 444)
							},
						});
					}
				}
			})

			const res = this.IsLogin()
			if (res) {
				if (this.CurrentPage === "My") {
					this.$nextTick(() => {
						this.$refs.my.LoginOrNot = this.IsLogin();
						this.$refs.my.getUserInfo();
					});
				} else if (this.CurrentPage === "Order") {
					this.$nextTick(() => {
						this.$refs.order.OrderList = [];
						this.$refs.order.page.pageNumber = 1
						this.$refs.order.totalPage = ''
						this.$refs.order.getOrderShop();
					});
				} else if (this.CurrentPage === "note") {
					this.$nextTick(() => {
						this.$refs.note.getShopCatList();
					});
				}
			}

			this.LoginOrNot = res;
		},
		watch: {
			LoginOrNot: function(newVal, oldVal) {
				if (newVal == true) {
					this.getPlaceAnOrderStatus();
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.CardIndex {
		height: 100%;
	}

	.footer {
		width: 100%;
		// min-height: 120rpx;
		// padding-bottom:calc(env(safe-area-inset-bottom) / 2) ;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		position: fixed;
		bottom: 0;
		left: 0;
		box-shadow: 0rpx -4rpx 20rpx 0rpx rgba(153, 153, 153, 0.12);
		z-index: 999;
		background-color: #FFFFFF;
		display: flex;
		text-align: center;
		justify-content: space-around;

		.footerItem {
			margin-top: 8rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.FooterIcon {
				width: 92rpx;
				height: 92rpx;
			}

			// image {
			// 	will-change: transform
			// }


			text {
				margin-top: -36rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 0.7);

				&.active {
					font-weight: 600;
					color: #4D8BFF;
				}
			}

		}
	}

	.ApplyForAnOrder {
		position: fixed;
		bottom: 10%;
		width: 718rpx;
		height: 112rpx;
		background: linear-gradient(90deg, #3869f6 0%, #5a92f0 100%);
		border-radius: 66rpx 66rpx 66rpx 66rpx;
		opacity: 1;
		text-align: center;
		line-height: 112rpx;
		margin-left: 16rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;

		.ApplyForAnOrderLeft {
			height: 100%;
			padding-left: 30rpx;
			flex: 1;

			.ApplyForAnOrderLeftTitle {
				width: 112rpx;
				height: 40rpx;
				font-size: 28rpx;
				margin-top: -20rpx;
			}

			.ApplyForAnOrderLeftContent {
				width: 336rpx;
				height: 36rpx;
				font-size: 24rpx;
			}
		}

		.ApplyForAnOrderRight {
			width: 68rpx;
			height: 46rpx;
			margin-right: 20rpx;
		}
	}

	.cu-dialog {
		background-color: initial !important;

		.PlaceAnOrder {
			width: 100%;
			height: 100%;
			background-color: #FFFFFF;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			padding: 20rpx;

			.PlaceAnOrderTitle {
				.PlaceAnOrderTitleTop {
					display: flex;
					justify-content: space-between;

					.Title {
						font-size: 32rpx;
					}

					.Close {
						color: #ccc;
					}
				}

				.PlaceAnOrderTitleContent {
					color: #ccc;
					text-align: start;
					margin-top: 30rpx;
					font-size: 25rpx;
				}
			}

			.PlaceAnOrderContent {
				width: 100%;

				.Form {
					width: 100%;

					.WxAvatar,
					.WxNickName,
					.CompanyName,
					.ContactPerson {
						display: flex;
						justify-content: space-between;
						height: 80rpx;
						border-bottom: 1rpx solid #ececec;
						line-height: 80rpx;
						align-items: center;
					}

					.FormTitle {
						// flex: 1;
					}


					.WxAvatarContent {
						width: 100rpx;
						height: 100rpx;
						margin-bottom: 30rpx;
					}

					.ContentInput {
						width: 200rpx;
						margin-left: 80rpx;
						text-align: end !important;
					}
				}

				.ConfimBtn {
					width: 100%;
					height: 74rpx;
					background: #386af6;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					opacity: 1;
					margin-top: 30rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 74rpx;
				}
			}
		}

		.Status {
			width: 100%;
			height: 200rpx;
			background-color: #FFFFFF;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			padding: 20rpx;

			.StatusBth {
				width: 100%;
				height: 80rpx;
				border-radius: 16rpx;
				text-align: center;
				line-height: 80rpx;
				margin-top: 20rpx;
				color: #FFFFFF;
				background-color: #3869f6;
			}
		}
	}
</style>